<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h1>华宇尚城管理系统</h1>
  <a href="/UserController/logout">退出</a>
  <div id="menu">
    <div v-for="i in items">
        <p @click="showMenu($event)" >{{i.menu_Name}}</p>
        <ul id="ul_menu">
            <li v-for="m in i.childList">
                {{ m.menu_Name}}
            </li>
        </ul>
    </div>
  </div>
  <script src="../style/js/vue.js"></script>
  <script src="../style/js/jquery3.6.js"></script>
  <script>
      let map;
     $(function (){
         map=selMenu();
         var menu = new Vue({
             el: '#menu',
             data: {
                 items: map.menuList
             },
             methods:{
                 showMenu: function (event) {
                    let el = event.currentTarget;
                    $(el).next().toggle();
                 }
             }

         })
     })
      function selMenu(){
          let map= [];
          $.ajax({
              type:"post",
              url:"../MenuController/selMenu",
              dataType:"json",
              async: false,
              success:function (data){
                  map=data;
              }
          })
          return map;
      }
  </script>
</body>
</html>